<template>
  <div id="performanceSearch">
    <!-- 用于软磁性能的性能查询组件 -->
    <el-button type="primary" size="mini" @click="performanceQueryVisible = true">性能查询</el-button>
    <el-dialog title="性能查询" :visible.sync="performanceQueryVisible" width="70%" @close="performanceQueryCancel(true)">
      <div style="margin-bottom: 15px; margin-left: 20px;">
        <span>查询偏好：</span>
        <el-radio-group v-model="queryPrefer" @change="preferChange(queryPrefer)">
          <el-radio :label="'无'">无</el-radio>
          <el-radio :label="'磁化'">磁化</el-radio>
          <el-radio :label="'铁损'">铁损</el-radio>
        </el-radio-group>
      </div>
      <!-- <div style="margin-bottom: 15px; margin-left: 20px;">
        <span>匹配条件: </span>
        <el-select v-model="matchCondition" placeholder="请选择匹配条件" @change="matchConditionChange()">
          <el-option v-for="item in matchConditionOpts" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div> -->
      <!-- <div style="margin-bottom: 15px; margin-left: 20px;">
        <span>插值类型: </span>
        <el-select v-model="interpolationType" placeholder="请选择插值类型" disabled>
          <el-option v-for="item in interpolationTypeOpts" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div> -->
      <el-form :model="queryForm" :rules="queryRules" ref="queryForm" label-position="left" :inline="true" style="margin-left: 20px;">
        <a-row :gutter="20" style="display: flex;margin-bottom: 5px">
          <a-col>
            <el-form-item class="formItem" label-width="75px" label="频率/Hz:" prop="frequency">
              <el-select class="matchConditionChoose" v-model="frequencyCondition" placeholder="请选择匹配条件" disabled>
                <el-option v-for="item in matchConditionOneOpts" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
              <el-input class="queryFormInput" v-model="queryForm.frequency" placeholder="请输入非负数"></el-input>
            </el-form-item>
          </a-col>
          <a-col v-if="queryPrefer == '无' || queryPrefer == '磁化'">
            <el-form-item class="formItem" label-width="94px" label="磁场/(A/m):" prop="magnetic">
              <el-select class="matchConditionChoose" v-model="magneticCondition" placeholder="请选择匹配条件" disabled>
                <el-option v-for="item in matchConditionOneOpts" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
              <el-input class="queryFormInput" v-model="queryForm.magnetic" placeholder="请输入非负数" :disabled="queryPrefer == '铁损'"></el-input>
            </el-form-item>
          </a-col>
          <a-col>
            <el-form-item class="formItem" label-width="64px" label="磁密/T" prop="fluxDensity">
              <!-- <div style="width:36px">{{fluxDensityLabel}}</div> -->
              <el-select class="matchConditionChoose" v-model="fluxDensityCondition" placeholder="请选择匹配条件" :disabled="fluxDensityFlag">
                <el-option v-for="item in matchConditionOpts" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
              <el-input class="queryFormInput" v-model="queryForm.fluxDensity" placeholder="请输入非负数"></el-input>
            </el-form-item>
          </a-col>
          <a-col style="border-right: none" v-if="queryPrefer == '无' || queryPrefer == '铁损'">
            <el-form-item class="formItem" label-width="118px" label="铁损/(W/kg)" prop="ironLoss" style="border-right: none;display: flex;">
              <!-- <div style="width:36px">{{ironLossLabel}}</div> -->
              <el-select class="matchConditionChoose" v-model="ironLossCondition" placeholder="请选择匹配条件" :disabled="ironLossFlag">
                <el-option v-for="item in matchConditionOpts" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
              <el-input class="queryFormInput" v-model="queryForm.ironLoss" placeholder="请输入非负数" :disabled="queryPrefer == '磁化'"></el-input>
            </el-form-item>
          </a-col>
        </a-row>
      </el-form>

      <div style="display: flex; justify-content: space-between; margin: 0 10px 30px 20px;">
        <div>
          <el-button @click="performanceQueryCancel(false)">重置</el-button>
        </div>
        <div>
          <el-button @click="performanceQueryCancel(true)">取消</el-button>
          <el-button type="primary" @click="getPerformanceQuery()">查询</el-button> 
          <!-- <el-button type="primary" @click="showEdit()">查询</el-button>  -->
        </div>
      </div>
      <!-- <div slot="footer" class="dialog-footer" style="display: flex; justify-content: space-between;">
      </div> -->
      <el-card v-show="queryTableVisible" class="queryTableCard" v-loading="tableLoading">
        <el-table :data="queryData" height="539px" ref="queryDataTable" id="queryDataTable" @select="queryDataSelect" @select-all="queryDataSelect" @sort-change="tableGetSortChange" style="margin: 10px 0 10px; width: 100%" border :header-cell-style="{ background: '#FAFAFA' }">
          <el-table-column key="0" align="center" label-class-name="DisabledSelection" type="selection" fixed="left" width="40"> </el-table-column>
          <el-table-column key="1" align="center" label="序号" width="50" type="index"></el-table-column>
          <el-table-column key="2" align="center" label="编号" show-overflow-tooltip prop="parameterId" min-width="100px"></el-table-column>
          <el-table-column key="3" align="center" label="牌号" show-overflow-tooltip prop="grade" min-width="120px"></el-table-column>
          <el-table-column key="4" align="center" label="频率/Hz" show-overflow-tooltip prop="frequency" min-width="120"></el-table-column>
          <el-table-column key="5" align="center" label="磁场/(A/m)" show-overflow-tooltip prop="magnetic" width="120" v-if="queryPrefer == '无' || queryPrefer == '磁化'"></el-table-column>
          <el-table-column key="6" sortable="custom" align="center" label="磁密(插值)/T" show-overflow-tooltip prop="predictFluxDensity" width="200" v-if="queryPrefer == '无' || queryPrefer == '磁化'"></el-table-column>
          <el-table-column key="7" align="center" label="磁化误差" show-overflow-tooltip prop="magneticError" width="200" v-if="false"></el-table-column>
          <el-table-column key="8" align="center" label="磁化曲线文件名" show-overflow-tooltip prop="magneticFileName" width="130px" v-if="queryPrefer == '磁化'"></el-table-column>
          <el-table-column key="9" sortable="custom" align="center" label="铁损(插值)/(W/kg)" show-overflow-tooltip prop="predictIronLoss" width="200" v-if="queryPrefer == '无' || queryPrefer == '铁损'"></el-table-column>
          <el-table-column key="10" align="center" label="铁损误差" show-overflow-tooltip prop="ironLossError" width="200" v-if="false"></el-table-column>
          <el-table-column key="11" align="center" label="铁损曲线文件名" show-overflow-tooltip prop="ironLossFileName" width="130px" v-if="false"></el-table-column>
          <!-- <el-table-column align="center" label="原始磁密" show-overflow-tooltip prop="originalFluxDensity" width="120"></el-table-column> -->
          <!-- <el-table-column align="center" label="原始铁损" show-overflow-tooltip prop="originalIronLoss" width="120"></el-table-column> -->
        </el-table>
        <!-- 分页区 -->
        <div class="tableTools" style="display: flex; justify-content: space-between;">
          <el-pagination @size-change="queryPageSizeChange" @current-change="queryPageCurrentChange" :current-page="queryPage.pageNum" :page-sizes="[10, 20]" :page-size="queryPage.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="queryPage.total"> </el-pagination>
          <el-button type="primary" size="small" @click="downLoadTableData()">数据导出Excel</el-button> 
        </div>
      </el-card>
      <el-card v-show="curveVisible" style="margin-top: 10px; ">
        <div class="curveChoose" style="display: flex; justify-content: space-around;">
          <el-radio style="width:180px;" v-model="curveDisplayRadio" label="软磁静态磁化曲线" border @change="curveDataQuery(0)" v-if="queryPrefer != '铁损'">静态磁化曲线</el-radio>
          <el-radio style="width:180px;" v-model="curveDisplayRadio" label="软磁动态磁化曲线" border @change="curveDataQuery(0)" v-if="queryPrefer != '铁损'">动态磁化曲线</el-radio>
          <el-radio style="width:180px;" v-model="curveDisplayRadio" label="软磁静态铁损曲线" border @change="curveDataQuery(1)" v-if="queryPrefer != '磁化'">静态铁损曲线</el-radio>
          <el-radio style="width:180px;" v-model="curveDisplayRadio" label="软磁动态铁损曲线" border @change="curveDataQuery(1)" v-if="queryPrefer != '磁化'">动态铁损曲线</el-radio>
        </div>
        <div v-if="curveEmptyFlag" style="margin-top: 24px; display: flex; justify-content: center; color: red;">无曲线数据</div>
        <div id="SelectDataCurve" :style="`height:${graphHeight}px;width:100%`"></div>
        <div style="display: flex; justify-content: center;">
          <!-- <el-button type="primary" size="small" @click="downLoadCurveData()">下载曲线数据</el-button> -->
          <!-- <el-button type="primary" size="small" @click="downLoadCurveDataVisible = true">下载单条曲线数据</el-button> -->
          <el-button type="primary" size="small" @click="downLoadAllCurveData2()">下载全部曲线数据</el-button>
        </div>
      </el-card>
    </el-dialog>

    <!-- 表格查询填写数值的提示 -->
    <el-dialog title="提示" :visible.sync="tipVisible" width="30%">
      <div style="margin-bottom: 10px;">{{ tipMessage }}</div> 
      <div v-if="tipCode == 502">
        <el-radio-group v-model="tipChoose">
           <el-radio :label="tipUp">{{ tipUp }}</el-radio>
           <el-radio :label="tipDown">{{ tipDown }}</el-radio>
        </el-radio-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="tipVisible = false">重新输入数值</el-button>
        <el-button type="primary" @click="tipDataChange" v-if="tipCode == 502">确定</el-button>
      </span>
    </el-dialog>
    <!-- 表格查询填写数值的提示 -->

    <!-- 曲线数据下载 -->
    <el-dialog title="提示" :visible.sync="downLoadCurveDataVisible" width="30%" class="downLoadCurveDataTip" @close="downLoadCurveDataReset()">
      <div class="content">
        <el-form label-width="60px" :model="curveDataForm" ref="curveDataForm" :rules="curveDataFormRules">
          <el-form-item label="编号：" prop="parameterId">
            <el-input v-model="curveDataForm.parameterId"></el-input>
          </el-form-item>
          <el-form-item label="牌号：" prop="grade">
            <el-input v-model="curveDataForm.grade"></el-input>
          </el-form-item>
          <el-form-item label="频率：" prop="frequency">
            <el-input v-model="curveDataForm.frequency"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="downLoadCurveDataReset()">取消</el-button>
        <el-button type="primary" @click="downLoadCurveData2">确定</el-button>
      </span>
    </el-dialog>
    <!-- 曲线数据下载 -->
  </div>
</template>

<script>
import { Message } from 'element-ui'
import * as echarts from 'echarts'
import FileSaver from "file-saver";
import * as XLSX from "xlsx";

export default {
  props: {
    importDataType: ''
  },
  data() {
    var checkData = (rule, value, callback) => {
      // 非负数 包括整数和小数
      var reg = /^[0-9]+([.]{1}[0-9]{1,100})?$/
      if (!value && rule.required == true) {
        callback(new Error('请输入非负数'))
      } else if (!value && rule.required == false) { //当没有值的时候，直接callback，让他不校验直接执行下一步
        return callback()
      }
      setTimeout(() => {
        if (!reg.test(value)) {
          callback(new Error('请输入非负数'))
        } else {
          if (value < 0) {
            callback(new Error('请输入非负数 '))
          } else {
            return callback()
          }
        }
      }, 100)
    }
    var checkNull = (rule, value, callback) => {
      if(!value && rule.required == true) {
        callback(new Error('不可为空'))
      } else {
        return callback()
      }
    }
    return {
      performanceQueryVisible: false,
      /******************** query ************************/
      queryForm: {
        frequency: null,
        magnetic: null,
        fluxDensity: null,
        ironLoss: null,
      },
      queryRules: {
        frequency: [{ required: true, message: '请输入非负数', validator: checkData,  trigger: 'blur' }],
        magnetic: [{ required: true, message: '请输入非负数', validator: checkData, trigger: 'blur' }],
        fluxDensity: [{ required: true, message: '请输入非负数', validator: checkData, trigger: 'blur' }],
        ironLoss: [{ required: true, message: '请输入非负数', validator: checkData, trigger: 'blur' }],
      },
      queryPrefer:'无',
      matchCondition:'临近',
      frequencyCondition:'临近',
      magneticCondition:'临近',
      fluxDensityCondition:'临近',
      ironLossCondition:'临近',
      fluxDensityFlag: true,
      ironLossFlag: true,
      interpolationType:'线性插值',
      matchConditionOneOpts: [
        {
          value: '临近',
          label: '等于'
        }
      ],
      matchConditionOpts: [
        {
          value: '大于',
          label: '大于'
        },
        // {
        //   value: '大于等于',
        //   label: '大于等于'
        // },
        {
          value: '临近',
          label: '等于'
        },
        {
          value: '小于',
          label: '小于'
        },
        {
          value: '升序排序',
          label: '升序排序'
        },
        {
          value: '降序排序',
          label: '降序排序'
        },
        // {
        //   value: '小于等于',
        //   label: '小于等于'
        // },
        // {
        //   value: '临近',
        //   label: '临近'
        // }
      ],
      interpolationTypeOpts: [
        {
          value: '线性插值',
          label: '线性插值'
        },
        {
          value: '临近两点插值',
          label: '临近两点插值'
        },
        {
          value: '三次样条插值',
          label: '三次样条插值'
        }
      ],
      fluxDensityLabel: ':',
      ironLossLabel: ':',
      /******************** query ************************/

      /******************** table ************************/
      queryTableVisible: false, 
      tableLoading: false,
      queryData: [],
      queryPage: {
        //当前的页数
        pageNum: 1,
        //当前每页显示多少条数据
        pageSize: 10,
        total: 0,
        userId: JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.id
      },
      /******************** table ************************/

      /******************** echarts ************************/
      curveVisible: false,
      dataIdList: {
        magneticCurveId: [],
        ironLossCurveId: [],
      },
      // curveDataIdFlag: -1,
      nameTitle: [],
      curveDataNameList: [],
      curveDisplayRadio: '',
      specification: '', // 存储所选某行数据的specification
      ironLossCurveId: '', // 存储所选某行数据的ironLossCurveId
      magneticCurveId: '', // 存储所选某行数据的magneticCurveId
      curveEmptyFlag: false,
      graphHeight: 500,
      myChart: [],
      options: {
        xAxis: {
          name: '',
          nameTextStyle: {
            color: 'skyblue',
            padding: [5, 0, 0, 0]
          },
          nameLocation: 'middle',
          axisLine: {
            onZero: false
          }
        },
        yAxis: {
          name: '',
          position: 'left',
          nameTextStyle: {
            color: 'green'
          },
          axisLine: {
            onZero: false
          }
        },
        tooltip: {
          confine: true,
          formatter: function() {
          	// console.log(arguments)
          	// console.log(arguments[0])
          	// console.log(arguments[0].data)
            return 'x : ' + arguments[0].data[0] + '<br/>' + 'y : ' + arguments[0].data[1]
          }
        },
        series: [
          {
            type: 'line',
            data: [],
          }
        ],
        grid: [{ top: 100, }],
        legend: {
          data: [],
          icon: 'none',
          textStyle: {
            color: 'inherit'
          },
          orient: "vertical",
        }
      },
      /******************** echarts ************************/

      /******************** tip ************************/
      tipMessage: '',
      tipCode: -1,
      tipUp: -1,
      tipDown: -1,
      tipChoose: -1,
      tipVisible: false,
      /******************** tip ************************/
      
      /******************** 曲线数据下载tip ************************/
      downLoadCurveDataVisible: false,
      curveDataForm: {
        parameterId: null,
        grade: null,
        frequency: null,
      },
      curveDataFormRules: {
        parameterId: [{ required: true, message: '请输入下载曲线编号', validator: checkData,  trigger: 'blur' }],
        grade: [{ required: true, message: '请输入下载曲线编牌号', validator: checkNull, trigger: 'blur' }],
        frequency: [{ required: true, message: '请输入下载曲线频率', validator: checkData, trigger: 'blur' }],
      },
      curveDataList: [],
      /******************** 曲线数据下载tip ************************/

      /******************** 排序 ************************/
      sortOrder: 1, // 1 升序  2降序
      sortField: 1,  // 1 预测磁密 2 预测铁损
      /******************** 排序 ************************/


    }
  },
  mounted() {
    // this.drawChart();
  },
  methods: {
    showEdit() {
      Message({
        message: '程序员正在加班中！',
        center: true,
        customClass: 'myMessageClass'
      })
    },
    drawChart() {
      var charDom = document.getElementById('SelectDataCurve');
      if(!charDom) {
        setTimeout(() => {
          this.drawChart();
        },500);
      } else {
        this.myChart = echarts.init(charDom)
        this.myChart.setOption(this.options,true)
        this.$nextTick(()=>{this.myChart.resize()})
      }
    },
    drawChartHeight(relHeight) {
      this.myChart.clear()
      this.myChart.hideLoading()
      this.myChart.setOption(this.options)
      const autoHeight = relHeight
      // myChart.getDom().style.height = autoHeight + 'px'
      this.myChart.resize()
    },
    // 查询表格数据（需检验所填数据
    getPerformanceQuery() {
      var userId = JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.id
      // var data = {
      //     userId : JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.id,
      //     frequency: this.queryForm.frequency,
      //     magnetic: this.queryForm.magnetic,
      //     fluxDensity: this.queryForm.fluxDensity,
      //     ironLoss: this.queryForm.ironLoss,
      //     queryPrefer: this.queryPrefer,
      //     matchCondition: this.matchCondition,
      //     interpolationType: this.interpolationType,
      // }
      this.queryForm.frequency ? this.queryForm.frequency : this.queryForm.frequency = '0'
      this.queryForm.fluxDensity ? this.queryForm.fluxDensity : this.queryForm.fluxDensity = '0'
      this.queryForm.ironLoss ? this.queryForm.ironLoss : this.queryForm.ironLoss = '0'
      this.queryForm.magnetic ? this.queryForm.magnetic : this.queryForm.magnetic = '0'
      console.log('this.queryForm.ironLoss', this.queryForm.ironLoss)
      this.matchConditionChange()
      this.$refs['queryForm'].validate((valid) => {
        if (valid) {
          console.log('submit!!');
          this.queryTableVisible = true
          this.tableLoading = true
          this.axios({
            // baseURL: 'http://192.168.31.56:30668',
            baseURL: 'http://59.172.104.174:30669',
            url: '/performance_match/query',
            method: 'POST',
            data: {
              userId,
              frequency: this.queryForm.frequency,
              magnetic: this.queryForm.magnetic,
              fluxDensity: this.queryForm.fluxDensity,
              ironLoss: this.queryForm.ironLoss,
              queryPrefer: this.queryPrefer,
              matchCondition: this.matchCondition,
              interpolationType: this.interpolationType,
              pageNum: this.queryPage.pageNum,
              pageSize: this.queryPage.pageSize,
              sortOrder: this.sortOrder, // 1 升序  2降序
              sortField: this.sortField,  // 1 预测磁密 2 预测铁损
            }
          }).then(res => {
            console.log(res);
            // this.queryData = res.data.results.list
            this.queryData = []
            this.tipMessage = ''
            this.curveFlag = 0
            this.curveVisible = false
            console.log(res.data.success);
            if(res.data.success == true) {
              Message({
                message: '查询成功',
                center: true,
                type: 'success',
                customClass: 'myMessageClass'
              })
              console.log("success!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");
              // this.queryTableVisible = true
              this.queryPage.total = res.data.result.total
              for (let i = 0; i < res.data.result.list.length; i++) {
                this.queryData.push({
                  parameterId: res.data.result.list[i].num,
                  grade: res.data.result.list[i].grade,
                  frequency: res.data.result.list[i].frequency,
                  magnetic: res.data.result.list[i].magnetic,
                  fluxDensity: res.data.result.list[i].predictFluxDensity,
                  originalFluxDensity: res.data.result.list[i].originalFluxDensity,
                  predictFluxDensity: Number(String(res.data.result.list[i].predictFluxDensity).replace(/^(.*\..{4}).*$/,"$1")),
                  originalIronLoss: res.data.result.list[i].originalIronLoss,
                  predictIronLoss: Number(String(res.data.result.list[i].predictIronLoss).replace(/^(.*\..{4}).*$/,"$1")),
                  magneticError: res.data.result.list[i].magneticError,
                  ironLossError: res.data.result.list[i].ironLossError,
                  magneticFileName: res.data.result.list[i].magneticFilename,
                  ironLossFileName: res.data.result.list[i].ironLossFilename,
                  specification: res.data.result.list[i].specification,
                  ironLossCurveId: res.data.result.list[i].ironLossCurveId,
                  magneticCurveId: res.data.result.list[i].magneticCurveId,
                })
                // for (let j = 0; j < res.data.result.list[i].productStaticMagCurveDataList.length; j++) {
                //   this.magCurveDat.xData.push(res.data.result.list[i].productStaticMagCurveDataList[j].enJkg)
                //   this.magCurveDat.xData.push(res.data.result.list[i].productStaticMagCurveDataList[j].bmT)
                // }
                this.tableLoading = false
              }
            } else {
              console.log("false????????????????????????????");
              Message({
                message: '请根据提示重新选择或输入数据！',
                center: true,
                type: 'warning',
                customClass: 'myMessageClass'
              })
              this.tipCode = res.data.code
              this.queryTableVisible = false
              this.tipVisible = true
              this.tipMessage = res.data.message
              if(this. tipCode == 502) {
                this.tipUp = res.data.result.up
                this.tipDown = res.data.result.down
              } else {
                this.tipUp = -1
                this.tipDown = -1
              }
            }
          })
        } else {
          console.log('valid', valid)
          console.log('valid', this.queryForm)
          console.log('error!!');
          // Message({
          //   message: '数据填写无效，无法查询！',
          //   center: true,
          //   type: 'error',
          //   customClass: 'myMessageClass'
          // })
          return
        }
      });
    },
    // 排序
    tableGetSortChange(column) {
      console.log("column-----------",column)
      if((this.queryPrefer == '铁损' && column.prop == 'predictFluxDensity') || this.queryPrefer == '磁化' && column.prop == 'predictIronLoss') {
          var msg = '查询偏好为' + this.queryPrefer  + '，无法对此列排序'
          Message({
          message: msg,
          type: 'warning',
          center: true,
          customClass: 'myMessageClass'
        })
        return
      }
      if (column.order == 'ascending') {
        this.sortOrder = 1
      } else if (column.order == 'descending') {
        this.sortOrder = 2
      } else if (column.order == null) {
        this.sortOrder = 0
      }
      // if (column.prop == 'predictFluxDensity') {
      //   this.sortField = 1
      // } else if (column.prop == 'predictIronLoss') {
      //   this.sortField = 2
      // } else {
      //   this.sortField = 0
      // }
      // this.loadData()
      this.getPerformanceQuery()
    },
    // 取消 重置 关闭弹窗
    performanceQueryCancel(flag) {
      this.$refs['queryForm'].resetFields()
      this.queryForm.frequency = null
      this.queryForm.magnetic = null
      this.queryForm.fluxDensity = null
      this.queryForm.ironLoss = null
      this.queryPrefer = '无'
      this.interpolationType = '线性插值'
      this.queryPage.pageNum = 1
      this.queryPage.pageSize = 10
      this.queryPage.total = 0
      this.queryTableVisible = false
      this.performanceQueryVisible = !flag  // 重置不关闭窗口  取消则关闭窗口
      this.curveVisible = false
      this.queryData = []
      this.downLoadCurveDataReset()
    },
    // 查询偏好影响必填项
    preferChange(queryPrefer) {
      console.log('queryPrefer-------', queryPrefer)
      this.queryTableVisible = false
      this.curveVisible = false
      if(queryPrefer == '无') {
        this.queryRules.magnetic[0].required = true
        this.queryRules.ironLoss[0].required = true
        this.queryRules.fluxDensity[0].required = true
        this.fluxDensityFlag = true
        this.ironLossFlag = true
        this.fluxDensityCondition = '临近'
        this.ironLossCondition ='临近'
      } else if(queryPrefer == '磁化') { // 磁化:频率\磁场\磁密
        this.queryRules.magnetic[0].required = true
        this.queryRules.ironLoss[0].required = false
        this.queryRules.fluxDensity[0].required = false
        this.queryForm.ironLoss = null
        this.fluxDensityFlag = false
        this.ironLossFlag = true
        this.fluxDensityCondition = '降序排序'
        this.ironLossCondition ='升序排序'
      } else if(queryPrefer == '铁损') { // 铁损:频率\磁密\铁损
        this.queryRules.magnetic[0].required = false
        this.queryRules.ironLoss[0].required = false
        this.queryRules.fluxDensity[0].required = true
        this.queryForm.magnetic = null
        this.fluxDensityFlag = true
        this.ironLossFlag = false
        this.fluxDensityCondition = '降序排序'
        this.ironLossCondition ='升序排序'
      }
      this.matchConditionChange()
    },
    // 匹配条件更改
    matchConditionChange() {
      if(this.queryPrefer == '磁化') {
        // this.fluxDensityLabel = this.matchCondition
        // this.ironLossLabel = ':'
        this.matchCondition = this.fluxDensityCondition
        this.sortField = 1
        this.sortOrder = 0
      } else if(this.queryPrefer == '铁损') {
        // this.fluxDensityLabel = ':'
        // this.ironLossLabel = this.matchCondition
        this.matchCondition = this.ironLossCondition
        this.sortField = 2
        this.sortOrder = 0
      } else {
        this.matchCondition = '临近'
        this.sortField = 0
        this.sortOrder = 0
      }
      if(this.queryPrefer != '磁化' && this.ironLossCondition == '升序排序') {
        this.matchCondition = '临近'
        this.sortOrder = 1
      } else if (this.queryPrefer != '磁化' && this.ironLossCondition == '降序排序') {
        this.matchCondition = '临近'
        this.sortOrder = 2
      }
      if(this.queryPrefer != '铁损' && this.fluxDensityCondition == '升序排序') {
        this.matchCondition = '临近'
        this.sortOrder = 1
      } else if (this.queryPrefer != '铁损' && this.fluxDensityCondition == '降序排序') {
        this.matchCondition = '临近'
        this.sortOrder = 2
      }
      // console.log('matchConditionChange---------this.ironLossCondition', this.ironLossCondition)
      console.log('matchConditionChange---------this.sortOrder', this.sortOrder)
    },
    // 页码改变
    queryPageSizeChange(newSize) {
      this.queryPage.pageSize = newSize
      this.getPerformanceQuery()
      // this.loadData()
    },
    // 翻页
    queryPageCurrentChange(newPage) {
      this.queryPage.pageNum = newPage
      this.getPerformanceQuery()
      // this.loadData()
    },
    // 勾选某条数据（单选）
    queryDataSelect(selection, row) {
      // 用于实现单选框功能，清除其他已勾选的内容
      // 禁止多选
      // if (selection.length > 1) {
      //   this.$refs.queryDataTable.clearSelection()
      //   selection.shift()
      //   this.$refs.queryDataTable.toggleRowSelection(row)
      // }
      console.log(selection, row);
      this.dataIdList = {
        magneticCurveId: [],
        ironLossCurveId: [],
      }
      for (var i = 0; i < selection.length; i++) {
        // var dataId = this.queryPrefer == '铁损' ? selection[i].ironLossCurveId : selection[i].magneticCurveId
        this.dataIdList.magneticCurveId.push(selection[i].magneticCurveId)
        this.dataIdList.ironLossCurveId.push(selection[i].ironLossCurveId)
      }
      console.log('dataIdList----------', this.dataIdList);
      // var dataId = this.queryPrefer == '铁损' ? row.ironLossCurveId : row.magneticCurveId
      this.curveVisible = true
      this.drawChart();
      // this.specification = row.specification
      //爱泼斯坦方圈
      this.specification = '爱泼斯坦方圈'
      // this.ironLossCurveId = row.ironLossCurveId
      // this.magneticCurveId = row.magneticCurveId
      // this.curveDataIdFlag = this.curveDataIdFlag == -1 ? 0 : this.curveDataIdFlag
      // console.log('this.curveDataIdFlag', this.curveDataIdFlag)
      console.log('this.queryPrefer', this.queryPrefer)
      console.log('this.queryForm.frequency', this.queryForm.frequency)
      if(this.queryPrefer == '无' || this.queryPrefer == '磁化') {
        var flag = 0
        if(this.queryForm.frequency == 0) {
          this.curveDisplayRadio = '软磁静态磁化曲线'
        } else {
          this.curveDisplayRadio = '软磁动态磁化曲线'
        }
        // this.curveDisplayRadio = '软磁动态磁化曲线'
      } else {
        var flag = 1
        if(this.queryForm.frequency == 0) {
          this.curveDisplayRadio = '软磁静态铁损曲线'
        } else {
          this.curveDisplayRadio = '软磁动态铁损曲线'
        }
        // this.curveDisplayRadio = '软磁动态铁损曲线'
      }
      // 标题文字
      this.nameTitle = []
      // 下载曲线数据文件名称
      this.curveDataNameList = []
      this.curveDataList = []
      for (let i = 0; i < selection.length; i++) {
        this.nameTitle[i] = '编号：' + selection[i].parameterId + '，' + '牌号：' + selection[i].grade + '，' + '频率：' + selection[i].frequency + '；'
        this.curveDataList.push({ parameterId: selection[i].parameterId, grade: selection[i].grade, frequency: selection[i].frequency })
        this.curveDataNameList.push({ ironLossFileName: selection[i].ironLossFileName ? selection[i].ironLossFileName : '曲线数据.txt', 
                                      magneticFileName: selection[i].magneticFileName ? selection[i].magneticFileName : '曲线数据.txt' })
      }
      // this.options.legend.data = nameTitle
      // console.log('this.options.legend.data----------', this.options.legend.data);
      console.log('this.curveDataNameList', this.curveDataNameList)
      this.curveDataQuery(flag)
      this.downLoadCurveDataReset()
    },
    // 切换曲线类型————flag用于判断传何种id（0：磁化；1：铁损）
    curveDataQuery(flag) {
      // this.curveDataIdFlag = flag
      console.log(this.dataIdList,"dataIdList");
      var type = this.curveDisplayRadio
      console.log(type,"type");
      console.log(flag,"flag");
      this.options.series = []
      this.curveEmptyFlag = false
      console.log('this.specification', this.specification)
      if (flag == 0) {
        var dataId = this.dataIdList.magneticCurveId
      } else {
        var dataId = this.dataIdList.ironLossCurveId
      }
      this.axios({
        // baseURL: 'http://192.168.172.49:30668',
        baseURL: 'http://59.172.104.174:30669',
        url: `/productMetricalData/getMaterialData/${this.specification}`,
        method: 'POST',
        data: {
          dataId: dataId,
          type: type,
        },
      }).then(res => {
        console.log(res);
        this.options.xAxis.name = res.data.result.comments[0].label
        this.options.yAxis.name = res.data.result.comments[1].label
        console.log(res.data.result.list);
        this.options.grid[0].top = 30 * res.data.result.list.length
        this.graphHeight = 500 + 30 * res.data.result.list.length
        this.$nextTick(() => {
          this.drawChartHeight(this.graphHeight)
        })
        console.log('res.data.result.list.length', res.data.result.list.length)
        console.log('res.data.result.list[0].length', res.data.result.list[0].length)
        console.log('nameTitle', this.nameTitle)
        if (res.data.result.list[0].length != 0) {
          if(this.curveDisplayRadio == '软磁静态磁化曲线') {
            for(var i = 0; i < res.data.result.list.length; i++) {
              this.options.series.push({ type : 'line', data: [], name : this.nameTitle[i] })
              this.options.legend.data.push(this.nameTitle[i])
              this.options.series[i].data = res.data.result.list[i].map((item) => {
                return [item.hdcAm, item.bdcT]
              })
            }
          } else if(this.curveDisplayRadio == '软磁动态磁化曲线') {
            for(var i = 0; i < res.data.result.list.length; i++) {
              this.options.series.push({ type : 'line', data: [], name : this.nameTitle[i] })
              this.options.legend.data.push(this.nameTitle[i])
              this.options.series[i].data = res.data.result.list[i].map((item) => {
                return [item.unitHm, item.unitBm]
              })
            }
          } else if(this.curveDisplayRadio == '软磁静态铁损曲线') {
            for(var i = 0; i < res.data.result.list.length; i++) {
              this.options.series.push({ type : 'line', data: [], name : this.nameTitle[i] })
              this.options.legend.data.push(this.nameTitle[i])
              this.options.series[i].data = res.data.result.list[i].map((item) => {
                return [item.bmT, item.enJkg]
              })
            }
          } else if(this.curveDisplayRadio == '软磁动态铁损曲线') {
            for(var i = 0; i < res.data.result.list.length; i++) {
              this.options.series.push({ type : 'line', data: [], name : this.nameTitle[i] })
              this.options.legend.data.push(this.nameTitle[i])
              this.options.series[i].data = res.data.result.list[i].map((item) => {
                return [item.bmT, item.psWkg]
              })
            }
          }
          this.curveEmptyFlag = false
        } else {
          this.curveEmptyFlag = true
        }
        this.myChart.setOption(this.options, true);
        // this.options.xAxis.name = "Hm/(A/m)"
        // this.options.yAxis.name = "Jm/(T)"
        console.log(this.options,"this.options");
        console.log(this.options.legend,"this.options.legend");
        console.log(this.options.series,"this.options.series");
        console.log(this.options.series.length,"this.options.series.length");
        this.downLoadCurveDataReset()
        // if(this.options.series.length == 0 || (this.options.series.length == 1 && this.options.series[0].data.length == 0)) {
        //   this.curveEmptyFlag = true
        //   console.log(this.curveEmptyFlag, "this.curveEmptyFlag = true");
        // } else {
        //   this.curveEmptyFlag = false
        //   console.log(this.curveEmptyFlag, "this.curveEmptyFlag = false");
        // }
      })
    },
    // 全选取消————提示信息
    queryDataSelectAll(selection) {
      // Message({
      //   message: '不可多选或全选！',
      //   type: 'warning',
      //   center: true,
      //   customClass: 'myMessageClass'
      // })
      // this.$refs.queryDataTable.clearSelection()
      // this.curveVisible = false
    },
    // 根据提示信息修改输入的数值
    tipDataChange() {
      console.log(this.tipChoose,"tipChoose");
      this.queryForm.frequency = this.tipChoose
      this.tipVisible = false
      this.tipChoose = -1
    },
    // 下载表格数据
    downLoadTableData(name) {
      if (!name || name == '') {
          name = '数据表';
      }
			var xlsxParam = { raw: true };
      /* 从表生成工作簿对象 */
      //var wb = XLSX.utils.table_to_book(document.querySelector("#queryDataTable"));
      let tableDom = document.querySelector("#queryDataTable").cloneNode(true);
      let tableHeader = tableDom.querySelector('.el-table__header-wrapper');
      let tableBody = tableDom.querySelector('.el-table__body');
      tableHeader.childNodes[0].append(tableBody.childNodes[1]);
      let headerDom = tableHeader.childNodes[0].querySelectorAll('th');
      // 移除左侧checkbox的节点
      if (headerDom[0].querySelectorAll('.el-checkbox').length > 0) {
          headerDom[0].remove();
      }
      for (let key in headerDom) {
          if (headerDom[key].innerText === '操作') {
              headerDom[key].remove();
          }
      }
      // 清理掉checkbox 和操作的button
      let tableList = tableHeader.childNodes[0].childNodes[2].querySelectorAll('td');
      for (let key = 0; key < tableList.length; key++) {
          if (tableList[key].querySelectorAll('.el-checkbox').length > 0 || tableList[key].querySelectorAll('.el-button').length > 0) {
              tableList[key].remove();
          }
      }
      // 获取web的节点
      let webBook = XLSX.utils.table_to_book(tableHeader,xlsxParam);
      console.log('webBook--------', webBook)
      // 把当前的book节点写入XLSX中
      let webOut = XLSX.write(webBook, { bookType: 'xlsx', bookSST: true, type: 'array' });
      try {
          FileSaver.saveAs(new Blob([webOut], { type: 'application/octet-stream' }), name + '.xlsx');
      } catch (e) {
          if (typeof console !== 'undefined') console.log(e, webOut)
      }
		},
    // 下载单条曲线数据
    downLoadCurveData(number) {
      var fileData = ''
      console.log(number,"number");
      console.log(this.options.series[number].data,"this.options.series[number].data");
      fileData += '编号：' + this.curveDataList[number].parameterId + '\n' + '牌号：' + this.curveDataList[number].grade + '\n' + '频率/Hz：' + this.curveDataList[number].frequency + '\n'
      if (this.queryPrefer == '无') {
        if (this.curveDisplayRadio == '软磁静态磁化曲线' || this.curveDisplayRadio == '软磁动态磁化曲线') {
          var fileName = this.curveDataNameList[number].magneticFileName
        } else {
          var fileName = this.curveDataNameList[number].ironLossFileName
        }
      } else if (this.queryPrefer == '磁化') {
        var fileName = this.curveDataNameList[number].magneticFileName
      } else if (this.queryPrefer == '铁损') {
        var fileName = this.curveDataNameList[number].ironLossFileName
      }
      fileData += '文件名：' + fileName + '\n' + '\n'
      // fileData += 'x' + '  ' + 'y' + '\n'
      fileData += this.options.xAxis.name + '  ' + this.options.yAxis.name + '\n'
      for(var i = 0; i < this.options.series[number].data.length; i++) {
        fileData += this.options.series[number].data[i][0] + '  ' + this.options.series[number].data[i][1] + '\n'
      }
      console.log(fileData,"fileData");
      if(this.options.series[number].data.length == 0 || this.options.series[number].data == []) {
        Message({
          message: '曲线数据为空或未勾选该条数据，无法下载！',
          center: true,
          type: 'error',
          customClass:'myMessageClass'
        })
        return
      } else {
        
        fileName = '曲线数据.txt'
        // var fileData = this.options.series[0].data
        var urlObject = window.URL || window.webkitURL || window;
        var export_blob = new Blob([fileData]);
        var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
        save_link.href = urlObject.createObjectURL(export_blob);
        save_link.download = fileName;
        this.fakeClick(save_link);
      }
    },
    // 下载全部曲线数据
    downLoadAllCurveData() {
      console.log(this.options.series.length,"this.options.series.length");
      for(var i = 0; i < this.options.series.length; i++) {
        this.downLoadCurveData(i)
      }
    },
    downLoadAllCurveData2() {
      var fileData = ''
      console.log(this.options.series,"this.options.series");
      if(this.options.series.length == 0 || this.options.series == []) {
        Message({
          message: '曲线数据为空或未勾选该条数据，无法下载！',
          center: true,
          type: 'error',
          customClass:'myMessageClass'
        })
        return
      } else {
        for (let number = 0; number < this.options.series.length; number++) {
          fileData += '编号：' + this.curveDataList[number].parameterId + '\n' + '牌号：' + this.curveDataList[number].grade + '\n' + '频率/Hz：' + this.curveDataList[number].frequency + '\n'
          if (this.queryPrefer == '无') {
            if (this.curveDisplayRadio == '软磁静态磁化曲线' || this.curveDisplayRadio == '软磁动态磁化曲线') {
              var fileName = this.curveDataNameList[number].magneticFileName
            } else {
              var fileName = this.curveDataNameList[number].ironLossFileName
            }
          } else if (this.queryPrefer == '磁化') {
            var fileName = this.curveDataNameList[number].magneticFileName
          } else if (this.queryPrefer == '铁损') {
            var fileName = this.curveDataNameList[number].ironLossFileName
          }
          fileData += '文件名：' + fileName + '\n' + '\n'
          // fileData += 'x' + '  ' + 'y' + '\n'
          fileData += this.options.xAxis.name + '  ' + this.options.yAxis.name + '\n'
          for(var i = 0; i < this.options.series[number].data.length; i++) {
            fileData += this.options.series[number].data[i][0] + '  ' + this.options.series[number].data[i][1] + '\n'
          }
          if (number != this.options.series.length -1) {
            fileData += '\n' + '\n'
          }
        }
        console.log(fileData,"fileData");
        fileName = '曲线数据.txt'
        // var fileData = this.options.series[0].data
        var urlObject = window.URL || window.webkitURL || window;
        var export_blob = new Blob([fileData]);
        var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
        save_link.href = urlObject.createObjectURL(export_blob);
        save_link.download = fileName;
        this.fakeClick(save_link);
      }
    },
    fakeClick(obj) {
      var ev = document.createEvent("MouseEvents");
      ev.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
      obj.dispatchEvent(ev);
    },
    downLoadCurveData2() {
      this.$refs['curveDataForm'].validate((valid) => {
        if (valid) {
          console.log('submit!!')
          this.curveDataForm.parameterId = this.curveDataForm.parameterId.toString()
          this.curveDataForm.frequency = this.curveDataForm.frequency.toString()
          console.log('this.curveDataForm------------', this.curveDataForm)
          var flag = -1
          for (var i = 0; i < this.curveDataList.length; i++) {
            if (this.curveDataList[i].parameterId == this.curveDataForm.parameterId && this.curveDataList[i].grade == this.curveDataForm.grade &&this.curveDataList[i].frequency == this.curveDataForm.frequency) {
              flag = i
              console.log('i----flag', i)
            }
          }
          if (flag == -1) {
            Message({
              message: '没有符合的曲线！',
              center: true,
              type: 'error',
              customClass:'myMessageClass'
            })
          } else {
            this.downLoadCurveData(flag)
            this.downLoadCurveDataReset()
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    downLoadCurveDataReset() {
      this.curveDataForm = {
        parameterId: null,
        grade: null,
        frequency: null,
      },
      this.downLoadCurveDataVisible = false
    }
    // curveChange() {
    //   console.log(this.curveDisplayRadio,"curveDisplayRadiocurveDisplayRadiocurveDisplayRadiocurveDisplayRadio");
    //   this.axios({
    //     baseURL: 'http://59.172.104.174:30669',
    //     url: '/performance_match/getAxisData',
    //     method: 'GET',
    //     params: {
    //       specification: this.specification,
    //       type: this.curveDisplayRadio,
    //     },
    //   }).then(res => {
    //     console.log(res);
    //     this.magCurveData = []
    //     this.ironCurveData = []
    //   })
    // },
  }
}
</script>

<style lang="less" scoped>
.myMessageClass {
  z-index:5000 !important;
}
#performanceSearch{
  .performanceQueryItem {
    display: flex;
    align-items: center;
    padding-right: 20px !important;
    padding-left: 20px !important;
    // border-right: 2px solid #DCDFE6;
    /deep/.el-input {
      position: relative;
      font-size: 14px;
      margin-left: 10px;
      width: 80px;
    }
  }
  // /deep/.el-form-item.is-required {
  //     padding-right: 30px !important;
  // }
  /deep/.ant-col {
    width: 25%;
    border-right: 1px solid #ddd;
    // height: 40px
  }
  /deep/.el-form-item {
    display: flex !important;
  }
  /deep/.el-form-item__label {
    padding: 0 !important;
  }
  /deep/.el-form--label-left .el-form-item__label {
    padding: 0 !important;
  }
  /deep/.el-form--inline .el-form-item {
    // display: flex !important;
    display: block !important;
  }
  /deep/.el-form-item__content {
    display: flex !important;
  }
  /deep/.el-form--inline .el-form-item__content {
    display: flex !important;
  }
  /deep/.el-form--inline .el-form-item__label {
    padding-right: 0;
  }
  .queryTableCard{
    .el-table__fixed-body-wrapper {
      top: 48.8px !important;
    }
  } 
  .matchConditionChoose {
    width: 110px;
    margin-right: 5px;
  }
  .queryFormInput {
    width: 120px;
  }
  .formItem {
    //  border-right: 1px solid #ddd;
     display: flex;
  }
  .downLoadCurveDataTip {
    .content {
      display: flex;
      justify-content: center;
      /deep/.el-form-item__content {
        margin-left: 0 !important;
      }
    }
  }
}
</style>
